import { useModel } from '@@/plugin-model/useModel';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { Avatar, Button, message, Spin, Upload } from 'antd';
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { putAccount } from '@/services/aqchain-antd/account';

const EditAccount: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { provider, currentAccount } = initialState!;

  if (!provider) {
    return <Spin />;
  }

  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = async (values: API.ModelsAccountPut) => {
    try {
      const signer = provider.getSigner();
      values.signature = await signer.signMessage(
        'Account Operation Sign Message',
      );
      values.address = await signer.getAddress();
      const response = await putAccount({}, values);
      if (response.success) {
        message.success('提交成功');
        window.location.reload();
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <PageContainer>
      <ProCard>
        <ProForm<API.ModelsAccountPut>
          {...formItemLayout}
          initialValues={currentAccount}
          layout="horizontal"
          submitter={{
            render: () => {
              return (
                <ProForm.Item
                  {...submitFormLayout}
                  style={{
                    marginTop: 32,
                  }}
                >
                  <Button type="primary" htmlType="submit">
                    提交
                  </Button>
                </ProForm.Item>
              );
            },
          }}
          onFinish={onFinish}
        >
          {/*<ProForm.Item name='avatar' label='头像'>*/}
          {/*  <Avatar src={currentAccount?.avatar} size='large' icon={<UserOutlined />} />*/}
          {/*</ProForm.Item>*/}
          <ProFormText name="username" label="用户名" placeholder="用户名" />
          <ProFormText name="mail" label="邮箱" placeholder="邮箱" />
          <ProFormText name="alipayID" label="支付宝账户" placeholder="支付宝账户" />
          <ProFormText name="alipayName" label="支付宝账户名称" placeholder="支付宝账户名称" />
        </ProForm>
      </ProCard>
    </PageContainer>
  );
};

export default EditAccount;
